<!--
 * @Author: jyq
 * @Date: 2022-07-04 11:37:35
 * @LastEditTime: 2022-07-07 22:13:49
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\views\ShoppingView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
<div class="shopping">
    <van-nav-bar  @click-left="toHome()" class="myNavBar" :title="name" left-arrow>
      <template #right>
      <van-icon class="myIcon" name="search" />
      </template>
      </van-nav-bar>
      <div>
          <van-swipe  class="mySwipe" :autoplay="2000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
        </van-swipe-item>
         <template #indicator="{ active, total }">
    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
  </template>
        </van-swipe>
      </div>
      <div class="price">
        <div class="left">
          <div class="top">￥{{price}}</div>
          <div class="bottom">￥{{originprice}}</div>
        </div>
        <div class="right">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/product/icon_product_unfavor.png" />
        </div>
      </div>
      <div class="title">
       <van-tag round type="warring">小米自营</van-tag>
        {{name}}
      </div>
      <div class="desc">
        国标双A+级洗烘能力<br />
        22种洗涤模式，智能投放洗涤剂 <br />
        支持小爱同学语音遥控，支持OTA在线智能升级
      </div>
      <div class="ad">
        [米家冰箱新品536L，预售到手价2199！]双变频一级能效，36分贝低噪运行！
      </div>
      <div class="recommend">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/product/ranklist_logo.png" />
       入选必买榜
      </div>
      <div>
        <img class="welface" src="https://img.youpin.mi-img.com/youpinoper/dfae4d83b02472999fcd224ae1b41935.png?w=996&h=108" />
      </div>

    <van-action-sheet class="mySheet" 
     v-model:show="show" >
    <div class="content">
      <div class="top">
      <van-row>
      <van-col span="8"><img class="welface" src="https://img.youpin.mi-img.com/shopmain/6c819f06a308ab46c0388a194c6ab284.png?w=800&h=800@base@tag=imgScale&w=240&h=240"/>
      </van-col>
      <van-col span="8"><div class="middle">
      <div class="price"><span>￥</span>2799</div>
      <div class="selected">已选:x{{num}}</div>
      </div></van-col>
      <van-col span="8"> <img
      class="close"
      @click="show=false"
      src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/common/close_circle_grey_new.png"/></van-col>
      </van-row>
      </div>

      <div class="bottom">
        <div class="bottom_title">
          颜色
        </div>
       <div class="tag_button">
            <van-button
              plain
              color="rgb(153, 98, 26)"
              size="mini"
              type="primary"
            >白色</van-button>
          </div>
        <div class="bottom_title">
          规格
        </div>
         <div class="tag_button">
            <van-button
              size="mini"
              color="rgb(153, 98, 26)"
              plain
              type="primary"
            >巨省电</van-button>
          </div>
        <div class="bottom_title bottom_title_num">
          数量
        </div>
         <div class="bottom_title_stepper">
            <van-stepper
              input-width="25px"
              button-size="18px"
              v-model="num"
            />
          </div>
      </div>
        <van-button
          class="bottom_btn"
          type="primary"
          round
          block
          @click="addShoppingCartHandle()"
        >确定</van-button>
    </div>
    </van-action-sheet>

        <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="小米" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartShoppingnumber" @click="toShoppingCart" />
        <van-action-bar-button type="warning" text="加入购物车" @click="addShoppingCart" />
        <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
        </van-action-bar>
</div>


</template>
<script setup>
import {ref} from 'vue'
import {useRouter,useRoute} from 'vue-router';
import { Toast } from 'vant';
const {name,price,originprice} =JSON.parse(sessionStorage.getItem('shop'))
const router = useRouter()
const cartShoppingnumber = ref(JSON.parse(localStorage.getItem('shoppingcart')).length)
const num = ref(1) 
const toHome = ()=>{
    history.go(-1)
}
 const images = [
      'https://img.youpin.mi-img.com/shopmain/2ad7e84e0368de1f48d1cb2482c72b15.jpg?w=1080&h=1080',
      'https://img.youpin.mi-img.com/shopmain/dc60c5e4e119381cb3872ba1686eee77.jpg?w=1080&h=1080',
      'https://img.youpin.mi-img.com/shopmain/4e6beed96e2bad875569f6665c427ba2.jpg?w=1080&h=1080',
      'https://img.youpin.mi-img.com/shopmain/6f077ebc69b7dcd7dc4cb55878265b81.jpg?w=1080&h=1080'
    ];
const onClickIcon = () => Toast('点击图标');
const onClickButton = () => Toast('点击按钮');
const toShoppingCart = () =>{
  router.push('/order')
}
const show = ref(false)
const addShoppingCart = () => { 
  show.value= true;
  // sessionStorage.setItem('shoppingcart',{name,price})
}
const addShoppingCartHandle=()=>{
  const user = sessionStorage.getItem('user')
  if(user) {
    let number = num.value
    Toast('加入购物车')
   let shopping = JSON.stringify([{name,price,number}])
    let oldshopping  = localStorage.getItem('shoppingcart')
    if(oldshopping==null){
      localStorage.setItem('shoppingcart',shopping)
    }else{
      let oldShoppings = JSON.parse(oldshopping)
      shopping = {name,price,number}
      oldShoppings.push(shopping)
       localStorage.setItem('shoppingcart',JSON.stringify(oldShoppings))
       JSON.parse(localStorage.getItem('shoppingcart')).length
       cartShoppingnumber.value = oldShoppings.length;
    }
  }else{
    router.push('/login')
  }
  show.value=false
}

</script>
<style lang="less" scoped>
.mySwipe{
    width: 375px;
    height: 375px;
}
.mySheet{
   .bottom_btn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 3px;
      margin: 0 auto;
      font-size: 16px;
      font-weight: 500;
      border: 0;
      align-items: center;
      background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
      border-radius: 22px;
      width: 345px;
      height: 44px;
    }
    .content {
    padding: 16px 16px 160px;
    .top{

       width: 100%;
      img{
        width: 102px;
        float: left;
      }
      .middle{
         float: left;
        list-height:56px;
        .price{
        span{
          color: rgb(153, 98, 26);
          font-size: 18px; 
          margin-right: 2px;
          // margin-top: 3px;
          position: relative;
        }
        color: rgb(153, 98, 26); 
        font-size: 27px; 
        margin-right: 6px;
        font-weight: 700; 
        margin-left: 6px;
      }
      .selected{
        text-align: left;
         color: rgb(153, 153, 153); 
         font-size: 13px; 
         margin-left: 12px;
         margin-bottom: 8px;
      }
      }
      .close{
        width: 24px;
        float: right;
      }
    }
    .bottom{
      display: block;
      .bottom_title{
        color: rgb(51,51,51);
        font-size: 13px;
        font-weight: 600;
        line-height: 21px;
      }
     .bottom_title_num {
          float: left;
        }
        .tag_button {
          text-align: left;
        }
        .bottom_title_stepper {
          margin-top: 25px;
          float: right;
        }
    }
  }
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
  }
  .price{
    display: block;
    .left{
      float: left;
      .top{
         color: rgb(153, 98, 26); 
         font-size: 27px; 
         font-weight: 500;
         text-align: left;
          margin-left: 5px;
          line-height: 28px;
      }
      .bottom{
        color: rgb(0,0,0,0.4);
        font-size: 14px;
        text-decoration-line: line-through;
        line-height: 15px;
         margin-left: 3px;
      }
    }
    .right{
      float: right;
      img{
        width: 40px;
      }
    }
  }
  .title{
    display: inline-block;
    --van-tag-warning-color:rgb(51,51,51);
    font-size: 16px;
    font-weight: 600;
    flex-direction: row;
    margin-top: 10px;
    margin-right: 5px;
  }
  .desc{
    margin-top: 14px;
    color: #000;
    padding-left: 24px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    margin-top: 10px;
    font-size: 12px;
  }
  .ad{
    margin-top: 14px;
   text-align: left;
   color: rgb(51,51,51);
   font-size: 13px;
  }
  .recommend{
    align-items: center;
    background-color: rgb(255, 248, 237);
    border-radius: 6.33333px;
    height: 35.3333px;
    margin-right: 12.3333px;
    margin-left: 12.3333px;
    margin-top: 13.6667px;
    padding-left: 6.33333px;
    -webkit-box-align: center;
    img{
      width: 24px;
      float: left;
    }
    .text{
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      float: left;  
    }
  }
  .welface{
    width: 373px;
  }
</style>